<template>
    <div class="auth-page">

        <!-- 返回首页按钮 -->
        <div class="back-home">
            <button @click="goHome">返回首页</button>
        </div>

        <!-- 登录/注册表单 -->
        <div class="form-container">
            <h2>{{ state.isLogin ? '登录' : '注册' }}</h2>

            <!-- 用户名输入框 -->
            <input type="text" v-model="state.username" placeholder="手机号" class="input-field" />

            <!-- 密码输入框 -->
            <input type="password" v-model="state.password" placeholder="密码" class="input-field" />

            <!-- 登录或注册按钮 -->
            <button @click="submitForm" class="action-button">
                {{ state.isLogin ? '登录' : '注册' }}
            </button>

            <!-- 切换登录/注册 -->
            <p class="toggle-text" @click="toggleAuthMode">
                {{ state.isLogin ? '未有账号？欢迎注册' : '已有账号？请登录' }}
            </p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import axios from 'axios';

// 返回首页功能
const goHome = () => {
    window.location.href = '/'; // 替换为你的首页路径
};


// 定义页面状态
const state = reactive({
    isLogin: true, // 当前是否为登录模式
    username: '',
    password: '',
    errorMessage: '', // 用于显示错误信息
});

// 设置本地存储
const setLocal = (key: string, value: string) => {
    localStorage.setItem(key, value);
};

// 提交表单处理
const submitForm = async () => {
    if (state.isLogin) {// 登录逻辑
        
        console.log('登录中...', state.username, state.password);
        if (state.username === '' || state.password === '') {
            state.errorMessage = '手机号或密码不能为空';
            alert('手机号或密码不能为空');
            return;
        }

        try {
            const url = 'http://127.0.0.1:8080/login';
            const payload = {
                username: state.username,
                password: state.password,
            };

            const response = await axios.post(url, payload);

            if (response.data.code === 200) {
                const { data } = response.data;
                setLocal('Authorization', data); // 存储 Authorization
                state.errorMessage = ''; // 清空错误信息
                window.location.href = '/'; // 跳转回首页
            } else {
                state.errorMessage = response.data.msg || '登录失败，请重试';
                console.error(response.data.msg || '登录失败，请重试');
                alert(response.data.msg || '登录失败，请重试');
            }
        } catch (error) {
            state.errorMessage = '服务错误，请稍后重试';
            console.error(error);
        }
        
    } else {
        // 注册逻辑
        console.log('注册中...', state.username, state.password);

        if (state.username === '' || state.password === '') {
            state.errorMessage = '手机号或密码不能为空';
            alert('手机号或密码不能为空');
            return;
        }

        try {
            const url = 'http://127.0.0.1:8080/register';
            const payload = {
                username: state.username,
                password: state.password,
                phone: state.username
            };

            const response = await axios.post(url, payload);

            if (response.data.code === 200) {

                // 提示注册成功
                state.errorMessage = '注册成功，请登录';
                console.log('注册成功，请登录');
                alert('注册成功，请登录');
                toggleAuthMode();//切换到登录模式
            } else {
                state.errorMessage = response.data.msg || '注册失败，请重试';
                console.error(response.data.msg || '注册失败，请重试');
                alert(response.data.msg || '注册失败，请重试');
            }
        } catch (error) {
            state.errorMessage = '服务错误，请稍后重试';
            console.error(error);
            alert('服务错误，请稍后重试');
        }

    }
};

// 切换登录和注册模式
const toggleAuthMode = () => {
    state.isLogin = !state.isLogin;
    state.username = '';
    state.password = '';
};
</script>

<style scoped>
.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
}

/* 返回按钮 */
.back-home {
    width: 100%;
    display: flex;
    justify-content: start;
    padding: 10px;
    position: absolute;
    top: 20px;
    left: 20px;
}

.back-home button {
    padding: 5px 10px;
    background-color: #1baeae;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.back-home button:hover {
    background-color: #17a2a2;
}

/* 表单容器 */
.form-container {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
}

h2 {
    margin-bottom: 20px;
    color: #333;
}

.input-field {
    width: 93%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.action-button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #1baeae;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.action-button:hover {
    background-color: #17a2a2;
}

.toggle-text {
    margin-top: 10px;
    font-size: 14px;
    color: #1baeae;
    cursor: pointer;
}

.toggle-text:hover {
    text-decoration: underline;
}
</style>
